<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>HealthWatcher</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!--sidebar-->
    <link href="../css/sidebar.css" rel="stylesheet">

    <!--date-picker-->
    <link href="../lib/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .health-data {
            margin-top: 3em;
        }

        .subtitle {
            margin-top: 5px;;
        }

        .item {
            margin-top: 40px;
            color: white;
        }

        .item-value {
            color: white;
            margin-top: 0;
            padding-top: 0;
        }

        .box {
            border: 1px solid #69D2E7;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            background-color: #69D2E7;
        }

        .box-2 {
            border: 1px solid #ff9966;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            background-color: #Ff9966;
        }

        .box-3 {
            border: 1px solid #ff9999;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            background-color: #ff9999;
        }

        .box-4 {
            border: 1px solid #99cc99;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            background-color: #99cc99;
        }

        .btn-days {
            margin-right: 15px;
        }

    </style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!--左侧导航-->
        <div class="col-sm-3 col-md-2 sidebar"></div>

        <!--右面板-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 rightPanel">
            <div class="col-md-10">
                <div class="row">
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="index.html">健康数据</a></li>
                        <li role="presentation"><a href="sports.html">我的运动</a></li>
                        <li role="presentation"><a href="sleep.html">睡眠分析</a></li>
                    </ul>
                </div>
                <div class="row health-data">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <div class="input-group date form_date " data-date="" data-date-format="dd MM yyyy"
                                 data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                <input class="form-control" size="16" type="text" value="01 November 2015" readonly>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                            <input type="hidden" id="dtp_input2" value=""/><br/>
                        </div>
                        <h3 class="subtitle text-primary">健康数据</h3>
                    </div>
                    <div class="jumbotron">
                        <div class="container">
                            <div class="item-container col-md-3 ">
                                <div class="box">
                                    <h4 class="text-center item">身高 ：</h4>

                                    <h3 class="text-center  item-value">170cm</h3>
                                </div>
                            </div>

                            <div class="item-container col-md-3 ">
                                <div class="box-2">
                                    <h4 class="text-center item">体重 ：</h4>

                                    <h3 class="text-center  item-value">70kg</h3>
                                </div>
                            </div>

                            <div class="item-container col-md-3 ">
                                <div class="box-3">
                                    <h4 class="text-center item">血压 ：</h4>

                                    <h3 class="text-center  item-value">120/60</h3>
                                </div>
                            </div>

                            <div class="item-container col-md-3 ">
                                <div class="box-4">
                                    <h4 class="text-center item">心率 ：</h4>

                                    <h3 class="text-center  item-value">70bpm</h3>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!--
                    <div class="jumbotron">
                        <div class="container">
                            <div class="row">
                                <h4 class="col-md-3 text-primary">体重变化情况 ：</h4>
                                <button class="btn btn-primary btn-days">7天</button>
                                <button class="btn btn-primary btn-days">30天</button>
                                <button class="btn btn-primary btn-days">60天</button>
                                <button class="btn btn-primary btn-days">90天</button>
                                <button class="btn btn-primary btn-days">半年</button>
                                <button class="btn btn-primary btn-days">一年</button>
                            </div>

                            <div class="row line-chart">
                                <h2 class="text-primary">此处是曲线图</h2>
                            </div>
                        </div>
                    </div>
                    -->

                </div>
            </div>
        </div>

    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script src="../lib/datetimepicker/bootstrap-datetimepicker.min.js"></script>


<script>
    $(document).ready(function () {
        $(".sidebar").load("../sidebar.html");
    });
    $('.form_date').datetimepicker({
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        pickerPosition: "bottom-left"
    }).on('changeDate', function () {
        //window.location = "http://www.baidu.com/$('#dtp_input2').val()";
        alert($('#dtp_input2').val());
    });
</script>

</body>
</html>